{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="/static/datepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/static/iCheck/custom.css">
<link rel="stylesheet" href="/admin/css/chosen/chosen.css">
<style>

    * {
        padding: 0;
        margin: 0;
    }

    ul,li {
        list-style: none;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    /* 商品名称*/
    .priceNum li {
        border: 2px solid #f1f1f1;
        border-radius: 10px;
        height: 200px;
        margin-right: 30px;
        position: relative;
        padding: 0;
    }

    .priceNum li .img {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 2px solid #f1f1f1;
        text-align: center;
    }

    .priceNum li .img img {
        width: calc(100% - 20px);
        height: 80%;
        display: inline-block;
    }

    .priceNum li .content {
        padding: 10px;
        width: 100%;
    }

    .priceNum li .name {
        font-size: 18px;
        color: #333;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .priceNum li p:last-of-type {
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-size: 12px;
        width: calc(100% - 20px);
    }

    .priceNum li p:last-of-type>span {
        display: inline-block;
    }

    .red {
        color: #8b0000;
    }

    .numI {
        font-weight: 600;
        font-style: italic;
    }

    .form-horizontal .control-label {
        padding-top: 0;
    }

</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>购物商城</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{:Url('Order/index')}">订单列表</a>
            </li>
            <li class="active">
                <strong>预览</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                    <div class="ibox-tools">
                        <a href="javascript:window.history.go(-1);" class="btn btn-white btn-sm"><i class="fa fa-reply"></i> 返回</a>
                    </div>
                </div>
                <div class="ibox-content all">
                    <form id="form" class="form-horizontal" method="post">
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>订单商品:</label>
                            </div>
                            <div class="col-lg-11 priceNum">
                                <ul class="col-lg-12">
                                    {volist name="list" id="vo"}
                                    <li class="fl col-lg-2">
                                        <div class="img"><img src="{$vo.front_cover}" alt=""></div>
                                        <div class="content">
                                            <p class="name">{$vo.title}</p>
                                            <p>
                                            <span class="price fl">
                                                <span>单价:</span>
                                                <span class="red">{$vo.price}</span>
                                                <span>元</span>
                                            </span>
                                            <span class="num fr">
                                                <span>数量:</span>
                                                <span class="numI">{$vo.num}</span>
                                                <span>件</span>
                                            </span>
                                            </p>
                                        </div>
                                    </li>
                                    {/volist}
                                    <!--<li class="fl col-lg-2"></li>-->
                                    <!--<li class="fl col-lg-2"></li>-->
                                    <!--<li class="fl col-lg-2"></li>-->
                                    <!--<li class="fl col-lg-2"></li>-->

                                </ul>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>下单人:</label>
                            </div>
                            <div class="col-lg-11">
                               {$data.create_user}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>下单时间:</label>
                            </div>
                            <div class="col-lg-11">
                                {$data.create_time|time_format='Y-m-d H:i:s'}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 control-label">
                                <label>收件人:</label>
                            </div>
                            <div class="col-lg-11">
                                {$data.addressee}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 control-label">
                                <label>Tel:</label>
                            </div>
                            <div class="col-lg-11">
                                {$data.tel}
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>收件地址:</label>
                            </div>
                            <div class="col-lg-11">
                                {$data.address}
                            </div>
                        </div>

                        <div class="selblo"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/uploadify/jquery.uploadify.min.js"></script>
<script src="/static/iCheck/icheck.min.js"></script>
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.min.js"></script>
<script src="/admin/js/chosen.jquery.js"></script>
<script>
    $(function() {

        highlight_subnav("{:Url('Order/index')}");
    })

</script>
{/block}